<template>
    <div class="form-tab horizontal-tab">
        <div class="tabs-content">
            <div class="list-content outer">
                <div class="content" v-show="props.type === 'plane'">
                    <div class="form">
                        <div class="form-item tab-form">
                            <pui-selector v-model="mainRef.selectorValue[0]" :dataList="mainRef.lineList"></pui-selector>
                            <pui-selector v-model="mainRef.selectorValue[1]" :dataList="mainRef.columnList"></pui-selector>
                        </div>
                        <div class="form-content" v-show="mainRef.nowTabIndex === 0">
                            <div class="form-item">
                                <div class="label">器件横向宽度(μm):</div>
                                <input class="pui-input" v-model="mainRef.planeData[0].width" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">器件横向高度(μm):</div>
                                <input class="pui-input" v-model="mainRef.planeData[0].height" type="text" placeholder="请输入" />
                            </div>
                        </div>
                        <div class="form-content" v-show="mainRef.nowTabIndex === 1">
                            <div class="form-item">
                                <div class="label">行:</div>
                                <input class="pui-input" v-model="mainRef.planeData[1].line" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">列:</div>
                                <input class="pui-input" v-model="mainRef.planeData[1].column" type="text" placeholder="请输入" />
                            </div>
                        </div>
                        <div class="form-content" v-show="mainRef.nowTabIndex === 2">
                            <div class="form-item">
                                <div class="label">x/y:</div>
                                <input class="pui-input" v-model="mainRef.planeData[2].xy" type="text" placeholder="请输入" />
                            </div>
                        </div>
                        <div class="form-content" v-show="mainRef.nowTabIndex === 3">
                            <div class="form-item">
                                <div class="label">掺杂类型:</div>
                                <pui-radio-group v-model="mainRef.planeData[3].dopingType" :list="mainRef.dopingTypeList"></pui-radio-group>
                            </div>
                            <div class="form-item">
                                <div class="label">掺杂浓度(m^-3):</div>
                                <input class="pui-input" v-model="mainRef.planeData[3].dopingLevel" type="text" placeholder="请输入" />
                            </div>
                        </div>
                    </div>
                    <div class="tab-column">
                        <div :class="['tab-column_item', mainRef.nowTabIndex === i && 'active']" @click="tabClickHandle(i)" :key="i" v-for="(item, i) in mainRef.tabList[mainRef.nowArea[0]].list"><span>{{ item }}</span></div>
                    </div>
                </div>
                <div class="content" v-show="props.type === 'electrode'">
                    <div class="form">
                        <div class="form-item">
                            <pui-selector v-model="mainRef.selectorValue[0]" :dataList="mainRef.lineList"></pui-selector>
                            <pui-selector v-model="mainRef.selectorValue[1]" :dataList="mainRef.columnList"></pui-selector>
                        </div>
                        <div class="form-content">
                            <div class="form-item">
                                <div class="label">P面电极:</div>
                                <pui-selector :dataList="mainRef.lightList" v-model="mainRef.electrodeData.p"></pui-selector>
                            </div>
                            <div class="form-item">
                                <div class="label">N面电极:</div>
                                <pui-selector :dataList="mainRef.lightList" v-model="mainRef.electrodeData.n"></pui-selector>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" v-show="props.type === 'insulation'">
                    <div class="form">
                        <div class="form-item">
                            <pui-selector v-model="mainRef.selectorValue[0]" :dataList="mainRef.lineList"></pui-selector>
                            <pui-selector v-model="mainRef.selectorValue[1]" :dataList="mainRef.columnList"></pui-selector>
                        </div>
                        <div class="form-content">
                            <div class="form-item">
                                <div class="label">绝缘层:</div>
                                <pui-selector :dataList="mainRef.jycList" v-model="mainRef.insulationData.jyc"></pui-selector>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" v-show="props.type === 'active'">
                    <div class="form">
                        <div class="form-item">
                            <pui-selector v-model="mainRef.selectorValue[0]" :dataList="mainRef.lineList"></pui-selector>
                            <pui-selector v-model="mainRef.selectorValue[1]" :dataList="mainRef.columnList"></pui-selector>
                        </div>
                        <div class="form-content">
                            <div class="form-item">
                                <div class="label">有源区行号:</div>
                                <pui-selector v-model="mainRef.activeData.activeSelectorValue[0]" :dataList="mainRef.lineList"></pui-selector>
                            </div>
                            <div class="form-item">
                                <div class="label">有源区列号:</div>
                                <pui-selector v-model="mainRef.activeData.activeSelectorValue[1]" :dataList="mainRef.columnList"></pui-selector>
                            </div>
                            <div class="form-item">
                                <div class="label">掺杂类型:</div>
                                <pui-radio-group v-model="mainRef.activeData.activeDopingType" :list="mainRef.activeDopingTypeList"></pui-radio-group>
                            </div>
                            <div class="form-item" v-show="mainRef.activeData.activeDopingType === '2'">
                                <div class="label">编辑量子阱:</div>
                                <pui-button @click="showQuantumWell">打开</pui-button>
                            </div>
                            <div class="form-item">
                                <div class="label">x/y:</div>
                                <input class="pui-input" v-model="mainRef.activeData.xy" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">光栅长度:</div>
                                <input class="pui-input" v-model="mainRef.activeData.length" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">光栅厚度:</div>
                                <input class="pui-input" v-model="mainRef.activeData.height" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">光栅中心周期:</div>
                                <input class="pui-input" v-model="mainRef.activeData.waveLength" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">折射率耦合参数:</div>
                                <input class="pui-input" v-model="mainRef.activeData.zIndex" type="text" placeholder="请输入" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'horizontal-design',
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, nextTick } from 'vue'
import ContextMenu from '../../MenuContext'
const props = defineProps({
    type: {
        type: String,
        default: 'plane'
    }
})
const { proxy } = getCurrentInstance() as any
const emit = defineEmits({
    'showSetting': (val: any) => {},
    'showQuantumWell': (val: any) => {}
})
const mainRef = reactive({
    isActive: false,
    isDisabled: false,
    nowTabIndex: 0,
    nowArea: [0, 0],
    tabList: [
        {
            name: '横向结构设计-横截面设计', // plane
            list: ['结构尺寸', '网格划分', '材料组分', '掺杂设计']
        },
        {
            name: '横向结构设计-电极' // electrode
        },
        {
            name: '横向结构设计-绝缘层' // insulation
        },
        {
            name: '横向结构设计-有源区设计',
            list: ['有源区指定'] // active
        },
        // {
        //     area: 'vertical',
        //     list: [
        //         {
        //             name: '纵向结构设计'
        //         },
        //         {
        //             name: '纵向参数编辑'
        //         },
        //     ]
        // }
    ],
    selectorValue: ['Line1', 'Column1'],
    activeSelectorValue: ['Line2', 'Column2'],
    lineList: [
        {
            label: 'Line1',
            value: 'Line1',
        },
        {
            label: 'Line2',
            value: 'Line2',
        },
        {
            label: 'Line3',
            value: 'Line3',
        },
    ],
    columnList: [
        {
            label: 'Column1',
            value: 'Column1',
        },
        {
            label: 'Column2',
            value: 'Column2',
        },
        {
            label: 'Column3',
            value: 'Column3',
        },
    ],
    dopingTypeList: [
        {
          value: '1',
          label: 'NONE'
        },
        {
          value: '2',
          label: 'N'
        },
        {
          value: '3',
          label: 'P'
        },
    ],
    dopingType: '1',
    activeDopingTypeList: [
        {
          value: '1',
          label: '体材料'
        },
        {
          value: '2',
          label: '量子阱'
        },
    ],
    activeDopingType: '1',
    planeData: [
        {
            width: 300,
            height: 100,
        },
        {
            line: 3,
            column: 3,
        },
        {
            xy: 0.3,
        },
        {
            dopingType: '1',
            dopingLevel: 5e25
        },
    ],
    electrodeData: {
        p: 'Ge',
        n: 'Ge',
    },
    insulationData: {
        jyc: 'SiO2'
    },
    activeData: {
        activeSelectorValue: ['Line2', 'Column2'],
        activeDopingType: '1',
        xy: 0.3,
        length: 0,
        height: 0,
        waveLength: 0,
        zIndex: 0,
    },
    jycList: [
        {
          value: 'SiO2',
          label: 'SiO2'
        }
    ],
    lightList: [
        {
          value: 'Ge',
          label: 'Ge'
        },
        {
          value: 'Si',
          label: 'Si'
        },
        {
          value: 'Al',
          label: 'Al'
        },
        {
          value: 'Au',
          label: 'Au'
        },
        {
          value: 'Ag',
          label: 'Ag'
        },
    ]
}) as any
const computed = () => {

}
const tabClickHandle = (i: any) => {
    mainRef.nowTabIndex = i
    
}
const showContextMenu = (e: any) => {
    const menuList = [
        {
            label: '编辑对象属性',
            type: 'edit',
            fn: () => {
            }
        },
        {
            label: '删除',
            type: 'delete',
            fn: () => {
            }
        }
    ]
    e.preventDefault()
    ContextMenu(e, menuList)
}
const showQuantumWell = () => {
    emit('showQuantumWell', 'showQuantumWell')
}
const init = () => {
}
defineExpose({
    init
})
</script>